import React, { useEffect, useState } from 'react';
import { mockData } from '../utils/mockData';

const WorkOrderStatus = () => {
  const [stats, setStats] = useState({
    'newly-created': 0,
    'completed': 0,
    'review-rejected': 0,
    'review-passed': 0,
    'pending-review': 0,
    'transferred': 0,
    'returned': 0,
    'rejected': 0,
    'other': 0
  });

  useEffect(() => {
    updateStats();
    const interval = setInterval(updateStats, 5000);
    return () => clearInterval(interval);
  }, []);

  const updateStats = () => {
    const apiData = mockData.workOrderStatus;
    const newStats = processStatusData(apiData);
    setStats(newStats);
  };

  const processStatusData = (apiData) => {
    const newStats = {
      'newly-created': 0,
      'completed': 0,
      'review-rejected': 0,
      'review-passed': 0,
      'pending-review': 0,
      'transferred': 0,
      'returned': 0,
      'rejected': 0,
      'other': 0
    };

    apiData.forEach(item => {
      const statusName = item.status;
      const count = parseInt(item.order_status_work_order_count) || 0;

      switch(statusName) {
        case '刚创建':
          newStats['newly-created'] = count;
          break;
        case '完结':
          newStats['completed'] = count;
          break;
        case '审核不通过':
          newStats['review-rejected'] = count;
          break;
        case '审核通过':
          newStats['review-passed'] = count;
          break;
        case '待审核':
          newStats['pending-review'] = count;
          break;
        case '转交':
          newStats['transferred'] = count;
          break;
        case '退回（作废）':
          newStats['returned'] = count;
          break;
        case '驳回':
          newStats['rejected'] = count;
          break;
        case '其他':
          newStats['other'] = count;
          break;
      }
    });

    return newStats;
  };

  const getDefaultStatusStats = () => {
    return {
      'newly-created': 0,
      'completed': 0,
      'review-rejected': 0,
      'review-passed': 0,
      'pending-review': 0,
      'transferred': 0,
      'returned': 0,
      'rejected': 0,
      'other': 0
    };
  };

  const animateCount = (start, target) => {
    // 简化动画效果，直接返回目标值
    return target.toLocaleString();
  };

  return (
    <div className="workorder-stats-container">
      <div className="status-grid">
        <div className="status-item newly-created">
          <div className="status-icon"></div>
          <div className="status-name">刚创建</div>
          <div className="status-count">{animateCount(0, stats['newly-created'])}</div>
        </div>
        
        <div className="status-item completed">
          <div className="status-icon"></div>
          <div className="status-name">完结</div>
          <div className="status-count">{animateCount(0, stats['completed'])}</div>
        </div>
        
        <div className="status-item review-rejected">
          <div className="status-icon"></div>
          <div className="status-name">审核不通过</div>
          <div className="status-count">{animateCount(0, stats['review-rejected'])}</div>
        </div>
        
        <div className="status-item review-passed">
          <div className="status-icon"></div>
          <div className="status-name">审核通过</div>
          <div className="status-count">{animateCount(0, stats['review-passed'])}</div>
        </div>
        
        <div className="status-item pending-review">
          <div className="status-icon"></div>
          <div className="status-name">待审核</div>
          <div className="status-count">{animateCount(0, stats['pending-review'])}</div>
        </div>
        
        <div className="status-item transferred">
          <div className="status-icon"></div>
          <div className="status-name">转交</div>
          <div className="status-count">{animateCount(0, stats['transferred'])}</div>
        </div>
        
        <div className="status-item returned">
          <div className="status-icon"></div>
          <div className="status-name">退回(作废)</div>
          <div className="status-count">{animateCount(0, stats['returned'])}</div>
        </div>
        
        <div className="status-item rejected">
          <div className="status-icon"></div>
          <div className="status-name">驳回</div>
          <div className="status-count">{animateCount(0, stats['rejected'])}</div>
        </div>
        
        <div className="status-item other">
          <div className="status-icon"></div>
          <div className="status-name">其他</div>
          <div className="status-count">{animateCount(0, stats['other'])}</div>
        </div>
      </div>
    </div>
  );
};

export default WorkOrderStatus;
